import React, {useState, useEffect} from 'react';
import { Table, Spin, Upload, message } from 'antd';
// import { useHistory } from 'react-router-dom';
import useRequest from '../../../based/services/HttpRequest';

const { Dragger } = Upload;

const propss = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange(info: any) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
};

const Orders = (props: any) => {
    const [count, setCount] = useState(0);

    // const history = useHistory()
    
    const [data, reload] = useRequest('https://get-users',{})

    useEffect(() => {
        console.log(data)
        // console.log(`Orders You clicked ${count},${props.aa} times`)
    }, [data]);

    // useEffect(()=> {
    //     console.log(`props.aa 改变了${props.aa}`)
    // },[props.aa])

    const linkTo = (num: number = 1) => {
        reload()
        // history.push('/o')
        // console.log(num)
    }

    const dataSource: any[] = [
        // {
        //   key: '1',
        //   name: '胡彦斌',
        //   age: 32,
        //   address: '西湖区湖底公园1号',
        // },
        // {
        //   key: '2',
        //   name: '胡彦祖',
        //   age: 42,
        //   address: '西湖区湖底公园1号',
        // }
    ];
      
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
    ];

    if(!data) {
        return(
            <Spin />
        )
    }

    return (
        <div>
            <Dragger {...propss}>
                <p className="ant-upload-text">Click or drag file to this area to upload</p>
                <p className="ant-upload-hint">
                Support for a single or bulk upload. Strictly prohibit from uploading company data or other
                band files
                </p>
            </Dragger>
            <button >
                登录
            </button>
            <h2>{data}</h2>
            <div>props.aa:{props.aa}</div>
            <span onClick={() => linkTo(1)}>link to111111111</span>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
            <Table dataSource={dataSource} columns={columns} />
        </div>
    );
}

export default Orders